<template>
    <div class="page-wrap">
        <div class="margin-b-16">
            <filter-form @search="handleSearch" />
        </div>
        <custom-table
            autoResize
            rowKey="id"
            size="small"
            :loading="loading"
            :columns="tableColumns"
            :data-source="list"
            :pagination="paginationConfig"
            @change="handleTableChange"
        >
            <template #systemName="{ record }">
                <a @click="showDetail(record.id)">{{ record.systemName }}</a>
            </template>
            <template #pmpLabels="{ record }">
                <div style="max-width: 100%; margin-bottom: 0">
                    <a-tag color="blue" v-for="item of record.pmpLabels" :key="item.id" style="margin: 2px; max-width: 100%" v-fitText>
                        {{ item.name }}
                    </a-tag>
                </div>
            </template>
            <template #status="{ record }">
                <a-badge status="success" :text="$filters.systemStatusFilter(record.status)" />
            </template>
            <template #systemType="{ record }">
                {{ $filters.valToNameFilter('systemType', record.systemType) }}
            </template>
            <template #startTime="{ record }">
                {{ $filters.dateFilter(record.startTime) }}
            </template>
            <template #productManager="{ text }">
                <span>{{ text }}</span>
            </template>
            <template #action="{ record }">
                <a @click="showDetail(record.id)">详情</a>
                <a-divider type="vertical" />
                <a @click.stop="handleEdit(record.id)">完善信息</a>
            </template>
        </custom-table>
    </div>
</template>

<script lang="ts">
import CustomTable from '@/components/Table/CutomTable.vue';
import FilterForm from './components/filterForm.vue';
import { useRouter } from 'vue-router';
import { useTableData, useTableLoading, usePagination, useTableColumns, useTableFormSearch, useTableAction } from '@/components/Table/hooks/index';
import { useMountedAndActivated } from '@/hooks/common/useMountedAndActivated';
import { defineComponent } from 'vue';
export default defineComponent({
    name: 'productAnalysisList',
    components: {
        FilterForm,
        CustomTable
    },
    setup() {
        const router = useRouter();
        const { loading, setLoading } = useTableLoading();
        const { paginationConfig, setPaginationConfig } = usePagination();
        const { columns: tableColumns } = useTableColumns('productAnalysis');
        const { list, getList, handleTableChange, setSearchQuery } = useTableData(setLoading, paginationConfig, setPaginationConfig, 'productAnalysis');
        const { handleSearch } = useTableFormSearch(setPaginationConfig, setSearchQuery, getList);
        const { showDetail } = useTableAction('productAnalysis', getList);
        const handleEdit = (id: number) => {
            router.push({
                path: '/productAnalysis/productDetail',
                query: {
                    id,
                    tab: 1
                }
            });
        };
        useMountedAndActivated(getList);
        return {
            handleEdit,
            list,
            tableColumns,
            loading,
            paginationConfig,
            handleTableChange,
            handleSearch,
            showDetail
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    min-height: 100%;
    padding: 12px 24px;
    background: #fff;
    .table-title {
        font-size: 16px;
        font-weight: bold;
    }
}
</style>